<template>
  <div class="remote-search-container">
    <el-select
      v-model="checkId"
      placeholder="请输入关键字"
      remote
      filterable
      @change="checkChange"
      popper-class="sddl-search-tree-popover"
      :remote-method="remoteMethod"
    >
      <el-option v-for="item of options" :key="item.id" :label="item.label" :value="item.id"></el-option>
    </el-select>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Emit, Prop } from 'vue-property-decorator'
import { RemoteOptions } from '../types'
@Component({})
export default class RemoteSearch extends Vue {
  @Prop({ type: Function, required: true }) searchMethod!: (str: string) => Promise<RemoteOptions[]>

  private options: RemoteOptions[] = []
  private checkId = ''

  // 远程搜索
  private remoteMethod (query: string): void {
    this.options = []
    this.searchMethod(query).then(res => {
      this.options = res
    })
  }

  // 选中搜索结果
  @Emit('change')
  private checkChange (value: string) {
    this.checkId = ''
    this.options = []
    return value
  }
}
</script>

<style scoped lang="scss">
.remote-search-container {
  width: 100%;
  margin-bottom: 10px;
  .el-select {
    width: 100%;
  }
}
</style>
